<%@ page import="java.util.List" %>
<%@ page import="org.example.entity.Content" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    List<Content> contents = (List<Content>) request.getAttribute("contents");
    int currentPage = (Integer) request.getAttribute("currentPage");
    int totalPages = (Integer) request.getAttribute("totalPages");
    String type = (String) request.getAttribute("type");
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内容管理 - 内容评级平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3f37c9;
            --success-color: #4cc9f0;
            --danger-color: #f72585;
            --warning-color: #f8961e;
            --info-color: #4895ef;
            --light-color: #f8f9fa;
            --dark-color: #212529;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f7fa;
            color: #333;
        }

        header {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 1rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--primary-color);
        }

        .main-content {
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .management-section {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
            padding: 2rem;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }

        .section-title {
            font-size: 1.5rem;
            color: var(--dark-color);
            margin: 0;
        }

        .btn {
            padding: 0.5rem 1rem;
            border-radius: 4px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s;
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }

        .btn-primary:hover {
            background-color: var(--secondary-color);
        }

        .management-tabs {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
            border-bottom: 1px solid #eee;
            padding-bottom: 0.5rem;
        }

        .tab {
            padding: 0.5rem 1rem;
            border-radius: 4px;
            color: #666;
            text-decoration: none;
            transition: all 0.2s;
        }

        .tab:hover {
            background-color: #f0f2f5;
            color: var(--primary-color);
        }

        .tab.active {
            background-color: var(--primary-color);
            color: white;
        }

        .content-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 1.5rem;
        }

        .content-table th, .content-table td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        .content-table th {
            background-color: #f8f9fa;
            font-weight: 600;
            color: #555;
        }

        .action-btn {
            padding: 0.25rem 0.5rem;
            border-radius: 4px;
            font-size: 0.875rem;
            text-decoration: none;
            margin-right: 0.5rem;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
        }

        .btn-edit {
            background-color: rgba(72, 149, 239, 0.1);
            color: var(--info-color);
        }

        .btn-edit:hover {
            background-color: rgba(72, 149, 239, 0.2);
        }

        .btn-delete {
            background-color: rgba(247, 37, 133, 0.1);
            color: var(--danger-color);
        }

        .btn-delete:hover {
            background-color: rgba(247, 37, 133, 0.2);
        }

        .btn-publish {
            background-color: rgba(76, 201, 240, 0.1);
            color: var(--success-color);
        }

        .btn-publish:hover {
            background-color: rgba(76, 201, 240, 0.2);
        }

        .btn-archive {
            background-color: rgba(248, 150, 30, 0.1);
            color: var(--warning-color);
        }

        .btn-archive:hover {
            background-color: rgba(248, 150, 30, 0.2);
        }

        .pagination {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
        }

        .page-link {
            padding: 0.5rem 1rem;
            border-radius: 4px;
            text-decoration: none;
            color: #666;
            border: 1px solid #ddd;
        }

        .page-link:hover {
            background-color: #f0f2f5;
        }

        .page-link.active {
            background-color: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        /* 新增样式 */
        .type-badge {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }

        .type-movie {
            background-color: rgba(67, 97, 238, 0.2);
            color: #4361ee;
        }

        .type-book {
            background-color: rgba(76, 201, 240, 0.2);
            color: #4cc9f0;
        }

        .type-music {
            background-color: rgba(243, 104, 224, 0.2);
            color: #f368e0;
        }

        .status-badge {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }

        .status-published {
            background-color: rgba(76, 184, 96, 0.2);
            color: #4cb860;
        }

        .status-draft {
            background-color: rgba(255, 152, 0, 0.2);
            color: #ff9800;
        }

        .status-archived {
            background-color: rgba(108, 117, 125, 0.2);
            color: #6c757d;
        }

        .cover-thumbnail {
            width: 60px;
            height: 80px;
            object-fit: cover;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<header>
    <div class="logo">内容评级平台</div>
    <div class="user-info">
        <span>欢迎，管理员</span>
        <a href="#" style="margin-left: 1rem;">退出</a>
    </div>
</header>

<div class="main-content">
    <section class="management-section">
        <div class="section-header">
            <h2 class="section-title">内容管理</h2>
            <a href="/content/add" class="btn btn-primary">
                <i class="fas fa-plus"></i> 添加内容
            </a>
        </div>

        <div class="management-tabs">
            <a href="?type=movie" class="tab <%= "movie".equals(type) ? "active" : "" %>">
                <i class="fas fa-film"></i> 电影
            </a>
            <a href="?type=book" class="tab <%= "book".equals(type) ? "active" : "" %>">
                <i class="fas fa-book"></i> 图书
            </a>
            <a href="?type=music" class="tab <%= "music".equals(type) ? "active" : "" %>">
                <i class="fas fa-music"></i> 音乐
            </a>
            <a href="?" class="tab <%= type == null || type.isEmpty() ? "active" : "" %>">
                <i class="fas fa-list"></i> 全部
            </a>
        </div>

        <table class="content-table">
            <thead>
            <tr>
                <th>封面</th>
                <th>标题</th>
                <th>类型</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <% if (contents.isEmpty()) { %>
            <tr>
                <td colspan="5" style="text-align: center;">没有找到内容</td>
            </tr>
            <% } %>

            <% for (Content content : contents) { %>
            <tr>
                <td>
                    <% if (content.getCoverUrl() != null && !content.getCoverUrl().isEmpty()) { %>
                    <img src="<%= content.getCoverUrl() %>" class="cover-thumbnail">
                    <% } else { %>
                    <div style="width:60px;height:80px;background:#eee;display:flex;align-items:center;justify-content:center;">
                        <i class="fas fa-image" style="color:#aaa;"></i>
                    </div>
                    <% } %>
                </td>
                <td><%= content.getTitle() %></td>
                <td>
                        <span class="type-badge type-<%= content.getType() %>">
                            <i class="fas fa-<%= content.getType() %>"></i>
                            <%=
                            "movie".equals(content.getType()) ? "电影" :
                                    "book".equals(content.getType()) ? "图书" : "音乐"
                            %>
                        </span>
                </td>
                <td>
                        <span class="status-badge status-<%= content.getStatus() %>">
                            <i class="fas fa-<%=
                                "published".equals(content.getStatus()) ? "check-circle" :
                                "draft".equals(content.getStatus()) ? "pencil" : "archive"
                            %>"></i>
                            <%=
                            "published".equals(content.getStatus()) ? "已发布" :
                                    "draft".equals(content.getStatus()) ? "草稿" : "已归档"
                            %>
                        </span>
                </td>
                <td>
                    <a href="/content/edit?id=<%= content.getId() %>" class="action-btn btn-edit">
                        <i class="fas fa-edit"></i> 编辑
                    </a>
                    <a href="/content/delete?id=<%= content.getId() %>" class="action-btn btn-delete"
                       onclick="return confirm('确定删除吗？')">
                        <i class="fas fa-trash"></i> 删除
                    </a>
                    <% if (!"published".equals(content.getStatus())) { %>
                    <a href="/content/status?id=<%= content.getId() %>&status=published"
                       class="action-btn btn-publish">
                        <i class="fas fa-upload"></i> 发布
                    </a>
                    <% } %>
                    <% if (!"archived".equals(content.getStatus())) { %>
                    <a href="/content/status?id=<%= content.getId() %>&status=archived"
                       class="action-btn btn-archive">
                        <i class="fas fa-archive"></i> 归档
                    </a>
                    <% } %>
                    <!-- 在操作列按钮组中添加 -->
                    <a href="<%= getContentTypeUrl(content) %>"
                       class="action-btn btn-view">
                        <i class="fas fa-eye"></i> 查看
                    </a>

                    <%!
                        // 辅助方法：根据类型生成对应URL
                        private String getContentTypeUrl(Content content) {
                            switch(content.getType()) {
                                case Content.TYPE_MOVIE:
                                    return "movies.jsp?contentId=" + content.getId();
                                case Content.TYPE_BOOK:
                                    return "books.jsp?contentId=" + content.getId();
                                case Content.TYPE_MUSIC:
                                    return "music.jsp?contentId=" + content.getId();
                                default:
                                    return "#";
                            }
                        }
                    %>
                </td>
            </tr>
            <% } %>
            </tbody>
        </table>

        <% if (totalPages > 1) { %>
        <div class="pagination">
            <% if (currentPage > 1) { %>
            <a href="?page=<%= currentPage-1 %><%= type != null ? "&type="+type : "" %>" class="page-link">
                <i class="fas fa-chevron-left"></i> 上一页
            </a>
            <% } %>

            <% for (int i = 1; i <= totalPages; i++) { %>
            <a href="?page=<%= i %><%= type != null ? "&type="+type : "" %>"
               class="page-link <%= i == currentPage ? "active" : "" %>">
                <%= i %>
            </a>
            <% } %>

            <% if (currentPage < totalPages) { %>
            <a href="?page=<%= currentPage+1 %><%= type != null ? "&type="+type : "" %>" class="page-link">
                下一页 <i class="fas fa-chevron-right"></i>
            </a>
            <% } %>
        </div>
        <% } %>
    </section>
</div>

<footer>
    <div style="text-align: center; padding: 1rem; color: #666; font-size: 0.875rem;">
        &copy; 2023 内容评级平台 - 版权所有
    </div>
</footer>

<script>
    // 确认删除对话框
    function confirmDelete() {
        return confirm('确定要删除这条内容吗？此操作无法撤销。');
    }
</script>
</body>
</html>